<template>
	<view v-if="visible" class="subject-selector">
		<view class="overlay" @click="close"></view>
		<view class="content">
			<!-- Step 1: 科目选择 -->
			<view v-if="currentStep === 'subject'" class="step">
				<view class="closes">
					<text class="title">选择科目</text>
					<text class="close-btn" @click="clearAndClose">X</text>
				</view>
				<view class="options">
					<view class="option" :class="{ active: selectedSubject === subject }"
						@click="selectSubject(subject)" v-for="subject in subjects" :key="subject">
						{{ subject }}
					</view>
				</view>
				<button class="confirm" @click="confirmSelection">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SubjectSelector',
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			currentStep: 'subject', // 当前步骤：直接进入选择科目
			subjects: ['大学英语', '高等数学', '计算机基础'], // 科目选项
			selectedSubject: null, // 当前选中的科目
		};
	},
	methods: {
		close() {
			this.$emit('close');
			this.resetSteps(); // 关闭时重置步骤
		},
		resetSteps() {
			this.selectedSubject = null; // 清空已选科目
		},
		selectSubject(subject) {
			this.selectedSubject = subject; // 选中科目
		},
		confirmSelection() {
			const selection = {
				subject: this.selectedSubject,
			};
			this.$emit('confirm', selection); // 将选择结果传递给父组件
			this.close(); // 关闭弹窗
		},
		clearAndClose() {
			this.resetSteps(); // 清空所有选择内容
			this.close(); // 关闭弹窗
		},
	},
};
</script>

<style scoped>
.subject-selector {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.content {
	position: relative;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	z-index: 1000;
	width: 80%;
}

.closes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.title {
	font-size: 18px;
	margin-bottom: 10px;
}

.options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.option {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
}

.option.active {
	border-color: blue;
	background-color: #e6f7ff;
}

.confirm {
	margin-top: 20px;
	width: 100%;
	background-color: blue;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
</style>